import React, { Component } from 'react'
import {connect} from 'react-redux'
import { Table, Input,Button,Select,DatePicker, Space,Tag} from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import axios from 'axios';
import {getDate} from '../../until/getTime'


const { Option, OptGroup } = Select;
const { RangePicker } = DatePicker;

class Sale extends Component {
    state={
        columns :[
            {
            title: 'id',
            dataIndex: 'id',
            key:'id'
            },
            {
            title: '活动名称',
            dataIndex: 'name',
            key:'name'
            },
            {
            title: '活动类型',
            dataIndex: 'typeName',
            key:'typeName'
            },
            {
            title: '有效期',
            dataIndex: 'startTime',
            key:'startTime',
            render:(value,item) =>getDate(value)+'至'+getDate(item.endTime)
            },
            {
                title: '操作',
                dataIndex: 'opr',
                key:'opr',
                render:(value,item,key)=>{
                    return <div>
                        <Tag>查看</Tag>
                    </div>
                }
            },
        ]
    }
    render() {
        const {columns} = this.state
        const {name,setName,type,setType,setTime,saleList} = this.props
        return (
            <div>
                  {/* 搜索部分 */}
                <Space >
                    <span>
                        活动名称：<Input value={name} type="text" style={{width:200}} onChange={ev=>setName(ev.target.value)}/>
                    </span>
                    <span>
                        活动类型：
                        <Select value={type} style={{ width: 200 }} onChange={value=>setType(value)}>
                    
                            <Option value="0000">未选择</Option>
                            <OptGroup label="五月活动">
                                <Option value="0501">劳动节</Option>
                                <Option value="0505">端午节</Option>
                            </OptGroup>
                            <OptGroup label="六月活动">
                                <Option value="0601">儿童节</Option>
                            </OptGroup>
                        </Select>
                    </span>
                    <span>
                        有效期 <RangePicker onChange={value=>{
                                setTime(value[0].toDate().getTime(),value[1].toDate().getTime()) 
                        }}/>
                    </span>
                    
                    <Button type="primary" icon={<SearchOutlined />} onClick={()=>this.props.searchList.call(this)}>
                        搜索
                    </Button>
                
                </Space>


              
                {/* 列表部分 */}
                <Table
                    rowSelection={{
                    type: "checkbox",

                    onChange: (selectedRowKeys, selectedRows) => {
                        // 获取当前选中的当前页面下的id及对应item
                        console.log('当前选中的id: ',selectedRowKeys, '当前选中的item: ', selectedRows);
                    },
                    getCheckboxProps: item => {
                        // 设置不能被点击的元素
                        return  {
                                disabled: item.status === '已过期'
                            }
                        }
                      
                    }}

                    rowKey={item=>item.id}
                    columns={columns}
                    dataSource={saleList}
                />


               
            </div>
        )
    }
    componentDidMount(){
        this.props.setSaleList()  
    }
}

let mapStateToProps = store =>{
    const {saleList,name,
        type,
        startTime,
        endTime,
        } = store

    return {
        saleList,
        name,
        type,
        startTime,
        endTime
    }
}

let mapDispatchToProps = dispatch =>{
    return {
        //初始化修改仓库数据
        setSaleList(list){
            axios.get('/integral/saleList').then(data=>{
                const {code,msg} = data.data
                if(code === 1){
                    dispatch({type:'SET_SALELIST',list:data.data.data})
                     return 
                }
                alert(msg)
             })  
        },
        // 更改活动名字
        setName(name){
            dispatch({type:'SET_NAME',name})
        },
        setType(value){
          
            dispatch({type:'SET_TYPE',value})
        },
        setTime(start,end){
            dispatch({type:'SET_TIME',start,end})
        },
        // 点击搜索
        searchList(){

            const {name,type,startTime,endTime} = this.props
            let searchData = {
                name,type,startTime,endTime
            }
            
            axios.post('/integral/sale/search',searchData).then(data=>{
                const {code,msg} = data.data
                if(code === 1){
                    dispatch({type:'SET_SALELIST',list:data.data.data})
                     return 
                }
                alert(msg)
             })  
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Sale)

